package com.pj.compose.ui.page.widget

import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.animate
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.pj.compose.common.config.StringExt.debugPrint
import com.pj.compose.ui.compose.AppTopBarColumn
import com.pj.compose.ui.theme.cEAEDEE
import kotlinx.coroutines.launch


@Composable
fun ProgressBarPage(navHostController: NavController) {
//    val screenHeight = LocalConfiguration.current.screenHeightDp
//    val scope = rememberCoroutineScope()
    var target by remember {
        mutableStateOf( 0f)
    }
    val process =
        animateFloatAsState(targetValue = target, animationSpec = tween(durationMillis = 5000))
    AppTopBarColumn(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize()
            .background(cEAEDEE),
        title = "ProgressBar", backClick = { navHostController.popBackStack() }) {
        Column(
            modifier = Modifier
                .padding(15.dp)
                .fillMaxWidth()
                .weight(1f)
                .padding(10.dp)
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(20.dp)
        ) {
            //线性进度条--按进度变化
//            LinearProgressIndicator()

            Box(modifier = Modifier.fillMaxWidth().padding(top = 15.dp), contentAlignment = Alignment.Center){
                LinearProgressIndicator(
                    progress = process.value, modifier = Modifier

                        .fillMaxWidth()
                        .height(20.dp)
                )
                Text(text = String.format("%.1f",process.value * 100) + "%", color = Color.Black)
            }

            CircularProgressIndicator(
                progress = process.value,
                modifier = Modifier
                    .padding(top = 15.dp)
                    .fillMaxWidth(),
                strokeWidth = 20.dp
            )
            Spacer(modifier = Modifier.weight(1f))
            Row(
                Modifier
                    .fillMaxWidth()
                    .padding(bottom = 50.dp),
                horizontalArrangement = Arrangement.spacedBy(20.dp)
            ) {
                val btnBorder = BorderStroke(1.dp, MaterialTheme.colorScheme.primary)
                Button(
                    onClick = {
                       target = 1f
                    },
                    modifier = Modifier
                        .weight(1f)
                        .height(40.dp)
                        .padding(horizontal = 20.dp),
                    shape = RoundedCornerShape(20.dp),
                    border = btnBorder,
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color.White,
                        contentColor = MaterialTheme.colorScheme.primary
                    )
                ) {
                    Text(text = "点击开始", color = MaterialTheme.colorScheme.primary)
                }
                Button(
                    onClick = { target = 0f},
                    modifier = Modifier
                        .weight(1f)
                        .height(40.dp)
                        .padding(horizontal = 20.dp),
                    shape = RoundedCornerShape(20.dp),
                    border = btnBorder,
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color.White,
                        contentColor = MaterialTheme.colorScheme.primary
                    )
                ) {
                    Text(text = "回滚进度", color = MaterialTheme.colorScheme.primary)
                }
            }
        }
    }
}